<template>
  <div class="app-container">
    <h5 class="titleInfo">快速预约</h5>
    <div class="content">
      <el-steps :active="active" finish-status="success">
        <el-step title="预约信息" />
        <el-step title="客户信息" />
        <el-step title="其他信息" />
      </el-steps>
      <el-form
        ref="form1"
        :rules="rules1"
        class="form"
        :inline="true"
        :model="form1"
        label-width="130px"
      >
        <div v-if="active==1">
          <el-row>
            <el-col :span="24">
              <el-form-item label="预约时间" prop="orderDate" width="236">
                <el-date-picker
                  v-model="form1.orderDate"
                  value-format="yyyy-MM-dd"
                  type="date"
                  :picker-options="pickerOptions"
                  placeholder="请选择时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="预约地址" prop="areas">
                <el-cascader
                  v-model="form1.areas"
                  placeholder="请选择省市"
                  :options="options"
                  @change="getHospital"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="预约医院" prop="hospitalId">
                <el-select
                  v-model="form1.hospitalId"
                  placeholder="请选择"
                  :disabled="disabled1"
                  @change="getItem"
                >
                  <el-option
                    v-for="item in hosOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.status?true:false"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="预约项目" prop="projectId">
                <el-select
                  v-model="form1.projectId"
                  placeholder="请选择"
                  :disabled="disabled2"
                  @change="getPbc1"
                >
                  <el-option
                    v-for="item in itemOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="一级分类" prop="bcId1">
                <el-select
                  v-model="form1.bcId1"
                  placeholder="请选择"
                  :disabled="disabled3"
                  @change="getPbc2"
                >
                  <el-option
                    v-for="item in bcId1Option"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="二级分类" prop="bcId2">
                <el-select
                  v-model="form1.bcId2"
                  placeholder="请选择"
                  :disabled="disabled4"
                  @change="getPbc3"
                >
                  <el-option
                    v-for="item in bcId2Option"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="三级分类" prop="bcId3">
                <el-select
                  v-model="form1.bcId3"
                  placeholder="请选择"
                  :disabled="disabled5"
                  @change="getPbcs"
                >
                  <el-option
                    v-for="item in bcId3Option"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="预约类型" prop="orderType">
                <el-select v-model="form1.orderType" placeholder="请选择">
                  <el-option
                    v-for="item in makeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div style="margin-top:60px">
            <el-button v-show="active==3||active==2" @click="prev">上一步</el-button>
            <el-button v-show="active!=3" @click="next1">下一步</el-button>
            <el-button v-show="active==3" @click="submitFn">提交</el-button>
          </div>
        </div>
      </el-form>
      <el-form
        ref="form2"
        :rules="rules2"
        class="form"
        :inline="true"
        :model="form2"
        label-width="130px"
      >
        <div v-if="active==2">
          <el-row>
            <el-col :span="24">
              <el-form-item label="客户姓名" prop="realname">
                <el-input v-model="form2.realname" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="客户手机" prop="username">
                <el-input v-model="form2.username" @blur="searchInfo" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="验证码" prop="verify">
                <el-input v-model="form2.verify" />
              </el-form-item>
              <!-- <el-button >获取验证码</el-button> -->
              <el-button
                type="primary"
                :disabled="content.indexOf('s后重新发送')>-1"
                @click="sendmsg"
              >{{ content }}</el-button>
            </el-col>
            <el-col :span="24">
              <el-form-item label="年龄" prop="age">
                <el-input v-model="form2.age" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="性别" prop="sex">
                <el-select v-model="form2.sex" placeholder="请选择">
                  <el-option
                    v-for="item in sexOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="职业" prop="work">
                <el-input v-model="form2.work" />
              </el-form-item>
            </el-col>
          </el-row>
          <div style="margin-top:60px">
            <el-button v-show="active==3||active==2" @click="prev">上一步</el-button>
            <el-button v-show="active!=3" @click="next2">下一步</el-button>
            <el-button v-show="active==3" @click="submitFn">提交</el-button>
          </div>
        </div>
      </el-form>
      <el-form
        ref="form3"
        :rules="rules3"
        class="form"
        :inline="true"
        :model="form3"
        label-width="130px"
      >
        <div v-if="active==3">
          <el-row>
            <el-col :span="24">
              <el-form-item label="性格特点">
                <el-input v-model="form3.userNature" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="用户关注">
                <el-select
                  v-model="form3.userConcern"
                  placeholder="请选择"
                  multiple
                  filterable
                  allow-create
                  default-first-option
                >
                  <el-option
                    v-for="item in userConcernOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="曾咨询医院">
                <el-input v-model="form3.knowHospitals" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="曾做过的项目">
                <el-input v-model="form3.doneProject" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="经济自主权">
                <el-input v-model="form3.autoEconomic" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="经济实力">
                <el-input v-model="form3.powerEconomic" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="预期消费">
                <el-select v-model="form3.expectFree" placeholder="请选择">
                  <el-option
                    v-for="item in expectFreeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="铺垫项目">
                <el-input v-model="form3.followProject" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="铺垫程度">
                <el-input v-model="form3.followLevel" placeholder="请输入0-100数字" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="submitRemark">
                <el-input v-model="form3.submitRemark" />
              </el-form-item>
            </el-col>
          </el-row>
          <div style="margin-top:60px">
            <el-button v-show="active==3||active==2" @click="prev">上一步</el-button>
            <el-button v-show="active==3" :disabled="btnFlag" @click="submitFn">提交</el-button>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { regionDropDown } from "@/api/area";

import {
  selectHospitalByProvCity,
  BeautyCateQueryChildren,
  selectProjectListByHospital,
  selectBeautyCategoryByPBcId,
  selectByReservation,
  appointmentOrderAdd,
  saveByReservation,
  sendMessage
} from "@/api/subscribePlatform";
export default {
  name: "SubscribeFast",
  data() {
    return {
      btnFlag: false,
      content: "发送验证码",
      totalTime: 60,
      canClick: true, // 添加canClick
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      flag: false,
      disabled1: true,
      disabled2: true,
      disabled3: true,
      disabled4: true,
      disabled5: true,
      itemOption: [],
      bcId1Option: [],
      bcId2Option: [],
      bcId3Option: [],
      makeOption: [],
      userConcernOptions: [],
      expectFreeOption: [],
      hosOption: [],
      pbcName: "",
      val: "",
      active: 1,
      dates: "",
      options: [],
      selectedOptions: [],
      form1: {
        province: null,
        city: null,
        bcId1: null,
        bcId2: null,
        bcId3: null,
        bcIdArray: []
      },
      sexOption: [
        {
          value: 1,
          label: "男"
        },
        {
          value: 2,
          label: "女"
        },
        {
          value: 0,
          label: "保密"
        }
      ],
      form2: {
        realname: ""
      },
      form3: {},
      forms: {},
      rules1: {
        orderDate: [{ required: true, message: "请选择时间", trigger: "blur" }],
        areas: [{ required: true, message: "请选择省市", trigger: "blur" }],
        hospitalId: [
          { required: true, message: "请选择预约医院", trigger: "blur" }
        ],
        projectId: [
          { required: true, message: "请选择预约项目", trigger: "blur" }
        ],
        bcId1: [{ required: true, message: "请选择一级分类", trigger: "blur" }],
        bcId2: [{ required: true, message: "请选择二级分类", trigger: "blur" }],
        bcId3: [{ required: true, message: "请选择三级分类", trigger: "blur" }],
        orderType: [
          { required: true, message: "请选择预约类型", trigger: "blur" }
        ]
      },
      rules2: {
        realname: [
          { required: true, message: "请输入客户姓名", trigger: "blur" }
        ],
        username: [
          { required: true, message: "请输入客户手机", trigger: "blur" }
        ],
        verify: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        work: [{ required: true, message: "请输入职业", trigger: "blur" }]
      },
      rules3: {
        submitRemark: [
          { required: true, message: "请输入客户姓名", trigger: "blur" }
        ]
      }
    };
  },
  inject: ["reload"],
  mounted() {
    // 省市区数据获取
    this.getArea();
    this.getOption();
  },
  methods: {
    // 发送短信
    sendmsg() {
      console.log(this.form2.username);
      sendMessage({
        phone: this.form2.username
      }).then(res => {
        console.log(res);
        this.$message({
          message: res.data.msg
        });
        if (res.data.code == 0) {
          if (!this.canClick) return; // 改动的是这两行代码
          this.canClick = false;
          this.content = this.totalTime + "s后重新发送";
          const clock = window.setInterval(() => {
            this.totalTime--;
            this.content = this.totalTime + "s后重新发送";
            if (this.totalTime < 0) {
              window.clearInterval(clock);
              this.content = "重新发送验证码";
              // this.totalTime = 300
              this.totalTime = 60;
              this.canClick = true; // 这里重新开启
            }
          }, 1000);
        }
      });
    },
    // 获取option
    getOption() {
      // 获取用户关注
      this.userConcernOptions = window.helper.userFocus("listReturn");
      // 获取预期消费
      this.expectFreeOption = window.helper.expectFreeType("listReturn");
      // 获取预约类型
      this.makeOption = window.helper.makeType("listReturn");
    },
    // 省市区
    getArea() {
      regionDropDown().then(res => {
        const newArr = [];
        res.data.data.forEach((item1, index) => {
          newArr.push({
            value: item1.id,
            label: item1.name
          });
          if (item1.children != null) {
            newArr[index]["children"] = [];
            item1.children.forEach(item2 => {
              newArr[index]["children"].push({
                value: item2.id,
                label: item2.name
              });
            });
          }
        });
        this.options = newArr;
      });
    },
    // 上一步
    prev() {
      if (this.active > 1) {
        this.active--;
      }
    },
    next1() {
      this.$refs["form1"].validate(valid => {
        if (valid) {
          this.active = 2;
        } else {
          this.$message({
            message: "必填项不能为空",
            type: "warning"
          });
        }
      });
      // this.active=2
      // console.log(this.form1)
    },
    next2() {
      /**

         */
      if (
        !this.form2.realname ||
        !this.form2.username ||
        !this.form2.verify ||
        !this.form2.work
      ) {
        this.$message({
          message: "必填项不能为空",
          type: "warning"
        });
        return false;
      }
      if (this.flag) {
        this.$refs["form2"].validate(valid => {
          if (valid) {
            this.active = 3;
            console.log("6");
          } else {
            this.$message({
              message: "必填项不能为空",
              type: "warning"
            });
          }
        });
        console.log(this.form2);
      } else {
        this.active = 3;
        this.form2.age = Number(this.form2.age);
        saveByReservation(this.form2)
          .then(res => {
            console.log(res);
            this.form2.userId = res.data.data.userId;
          })
          .catch(error => {
            this.$message.error(error);
          });
        console.log(this.form2);
      }
      console.log(this.form2);
    },
    // 获取预约医院
    getHospital() {
      this.form1.hospitalId = "";
      this.disabled1 = false;
      this.form1.province = this.form1.areas[0];
      this.form1.city = this.form1.areas[1];
      const datas = {
        province: this.form1.province,
        city: this.form1.city
      };
      selectHospitalByProvCity(datas).then(res => {
        const newArr = [];
        res.data.data.forEach(i => {
          if (i.minappStatus != 1) {
            newArr.push({
              value: i.id,
              label: i.minappAppoint == 1 ? "（停止引流）" + i.name : i.name,
              status: i.minappAppoint == 1 ? "gray" : ""
            });
          }
        });
        console.log(newArr);
        this.hosOption = newArr;
      });
    },
    // 获取预约项目
    getItem() {
      this.form1.projectId = "";
      this.disabled2 = false;
      const datas = {
        id: this.form1.hospitalId
      };
      selectProjectListByHospital(datas).then(res => {
        // console.log(res)
        const newArr = [];
        res.data.data.forEach(i => {
          newArr.push({
            value: Number(i.projectId),
            label: i.name,
            pBcId: i.pBcId
          });
        });
        this.itemOption = newArr;
      });
    },
    // 获取一级分类
    getPbc1() {
      const pid = this.form1.projectId;
      let pbcid1;
      // let pbcName
      this.itemOption.map(i => {
        if (i.value == String(pid)) {
          pbcid1 = i.pBcId;
          this.pbcName = i.label;
        }
      });
      if (this.pbcName.indexOf("其他") != -1) {
        this.disabled3 = false;
        this.disabled4 = true;
        this.disabled5 = true;
        this.form1.bcId1 = "";
        this.form1.bcId2 = "";
        this.form1.bcId3 = "";
        selectBeautyCategoryByPBcId({}).then(res => {
          const newArr = [];
          res.data.data.forEach(i => {
            newArr.push({
              value: i.id,
              label: i.name
            });
          });
          this.bcId1Option = newArr;
        });
      } else {
        this.disabled3 = false;
        this.disabled4 = false;
        this.disabled5 = false;
        const datas = {
          id: Number(pbcid1)
        };
        selectBeautyCategoryByPBcId(datas).then(res => {
          // console.log(res)
          const newArr1 = [];
          const newArr2 = [];
          const newArr3 = [];
          newArr1.push({
            value: res.data.data[0].id,
            label: res.data.data[0].name
          });
          newArr2.push({
            value: res.data.data[1].id,
            label: res.data.data[1].name
          });
          newArr3.push({
            value: res.data.data[2].id,
            label: res.data.data[2].name
          });
          this.bcId1Option = newArr1;
          this.form1.bcId1 = res.data.data[0].id;
          this.bcId2Option = newArr2;
          this.form1.bcId2 = res.data.data[1].id;
          this.bcId3Option = newArr3;
          this.form1.bcId3 = res.data.data[2].id;
          this.form1.bcIdArray = [
            this.form1.bcId1,
            this.form1.bcId2,
            this.form1.bcId3
          ];
        });
        // console.log("无其他")
      }
      // console.log(pbcName)
    },
    // 获取二级分类
    getPbc2() {
      if (this.pbcName.indexOf("其他") != -1) {
        this.disabled4 = false;
        this.disabled5 = true;
        const datas = {
          id: this.form1.bcId1
        };
        BeautyCateQueryChildren(datas).then(res => {
          console.log(res);
          const newArr = [];
          res.data.data.forEach(i => {
            newArr.push({
              value: i.id,
              label: i.name
            });
          });
          this.bcId2Option = newArr;
        });
      }
    },
    // 获取三级分类
    getPbc3() {
      if (this.pbcName.indexOf("其他") != -1) {
        this.disabled5 = false;
        const datas = {
          id: this.form1.bcId2
        };
        BeautyCateQueryChildren(datas).then(res => {
          console.log(res);
          const newArr = [];
          res.data.data.forEach(i => {
            newArr.push({
              value: i.id,
              label: i.name
            });
          });
          this.bcId3Option = newArr;
        });
      }
    },
    // 三级菜单数据整合
    getPbcs() {
      this.form1.bcIdArray = [
        this.form1.bcId1,
        this.form1.bcId2,
        this.form1.bcId3
      ];
    },
    // 预约单会员查询
    searchInfo() {
      const username = this.form2.username;
      const datas = { username: username };
      selectByReservation(datas).then(res => {
        console.log(res);
        if (!res.data.code) {
          this.form2.realname = res.data.data.realname;
          this.form2.age = Number(res.data.data.age);
          this.form2.sex = res.data.data.sex;
          this.form2.work = res.data.data.workplace;
          this.form2.userId = res.data.data.userId;
          this.form3.userNature = res.data.data.userNature;
          if (res.data.data.userConcern) {
            this.form3.userConcern = res.data.data.userConcern.split("#");
          }
          this.form3.knowHospitals = res.data.data.knowHospitals;
          this.form3.doneProject = res.data.data.doneProject;
          this.form3.autoEconomic = res.data.data.autoEconomic;
          this.form3.powerEconomic = res.data.data.powerEconomic;
          this.form3 = JSON.parse(JSON.stringify(this.form3));
          this.flag = true;
        } else {
          this.form2.realname = null;
          this.form2.age = null;
          this.form2.sex = null;
          this.form2.work = null;
          this.form2.userId = null;
          this.form3 = {};
        }
      });
    },
    // 提交
    submitFn() {
      this.$refs["form3"].validate(valid => {
        if (valid) {
          this.btnFlag = true;
          // console.log(this.form3)
          this.form3 = JSON.parse(JSON.stringify(this.form3));
          const obj3 = { ...this.form3 }

          obj3.expectFree = obj3.expectFree ? Number(obj3.expectFree) : 0;
          if (obj3.followLevel > 100) {
            this.$message({
              message: "铺垫程度不能大于100",
              type: "warning"
            });
            return;
          }
          if (obj3.userConcern) {
            obj3.userConcern = obj3.userConcern.join("#");
          }
          this.forms = {
            ...this.form1,
            ...this.form2,
            ...obj3
          };
          appointmentOrderAdd(this.forms)
            .then(res => {
              this.$message({
                showClose: true,
                message: res.data.msg
              });
              if (res.data.code == 0) {
                this.$router.push("/subPlatformIndex");
                this.reload();
              } else {
                this.form3.userConcern = this.form3.userConcern.split("#");
              }
            })
            .catch(error => {
              this.form3.userConcern = this.form3.userConcern.split("#");
              this.$message.error(error);
            });
          // console.log(this.form3)
          console.log(this.forms);
          console.log(JSON.stringify(this.forms));
          // console.log("6")
        } else {
          this.$message({
            message: "必填项不能为空",
            type: "warning"
          });
        }
      });
      this.btnFlag = false;
      console.log("提交了");
    }
  }
};
</script>
<style scoped>
.app-container {
  padding: 0px !important;
}
.content {
  padding: 20px;
}
.form > div {
  margin-top: 60px;
}
</style>
